<style lang="less">
    @import "../approve-task/taskpoolWait.less";
</style>
<template>
    <div class="search">
        <Row class="operation">
            <Button @click="viewImg" type="primary">查看图片</Button>
            <Button @click="goBack" type="primary">识别正确，退回合作商</Button>
            <Button @click="goOn" type="primary">识别错误，继续发起流程</Button>
            <Button @click="batchExport" type="primary">批量导出</Button>
            <circleLoading v-if="operationLoading"/>
        </Row>
        <rui-page :defines="defines">
            <rui-query
                :label-width="95"
                :query="queryData"
                :query-rows="searchFormOptions"
                ref="searchForm"
            />
            <rui-table
                :defineId="'approveOcrData'"
                :fixedLeft="['selection']"
                :showIndex="false"
                :columns="columns"
                @loadDatas="queryData"
                ref-query="searchForm"
                ref="approveOcrTable"
                @on-selection-change="changeSelect"
            />
        </rui-page>
        <modal v-model="remarkModalVisible"
               :label-width="80"
               :title="modalTitle"
               :closable="false"
               :mask-closable='false'
               :width="600"
               :styles="{top: '180px'}">
            <Spin fix size="large" v-if="operationLoading">
                <slot name="loading"></slot>
            </Spin>
            <div slot="footer">
                <Button type="text" @click="cancelApprove">取消</Button>
                <Button type="primary" @click="submitApprove">提交</Button>
            </div>
            <Row>
                <Form ref="approveOcrRemarkForm" :model="approveOcrRemarkForm" inline :label-width="30"
                      class="search-form">
                      <span style="display: inline-block;height: 40px;width: 100%;text-align: center">
                            <span v-text="remarkInputLabel"></span>&nbsp;
                            <span v-if="reject" style="color: red;">*</span>
                        </span>
                    <Form-item label="" :label-width="100" prop="remark">
                        <textarea v-model="approveOcrRemarkForm.remark" maxlength="512"
                               clearable placeholder="请输入" style="width: 400px;height: 100px;line-height: 20px"/>
                    </Form-item>
                </Form>
            </Row>
        </modal>
        <Modal v-model="imageModalVisible" width="1000px" :styles="{top: '20px'}" @on-ok="imageConfirm" @on-cancel="imageCancel">
            <div class="imageModalVisible">
                <ImagePreview :access="access" :codes="uniqueCodes" :busiNo="busiNo" :belongNo="belongNo" :isInit="isView" :path="path"></ImagePreview>
            </div>

        </Modal>
    </div>
</template>

<script>
    import {
        listApproveOcr,
        updateApproveOcr
    } from "@/projects/afs-core-business/api/afs-case/approve-ocr/approve-ocr";
    import circleLoading from "_c/circle-loading/circle-loading.vue";
    import approveOcrParams from "../defines/approve-ocr-params-define";
    import approveOcrData from "../defines/approve-ocr-define";
    import ImagePreview from "../../../../../basic/pages/image/file-audit/view/imagePreview";


    export default {
        name: "approve-ocr",
        components: {
            ImagePreview,
            circleLoading
        },
        data() {
            return {
                operationLoading: false,
                remarkModalVisible: false,
                operationType: "no",
                modalTitle: '',
                selectedList: [],
                selectedCount: 0,
                reject: false,
                remarkInputLabel: '',
                imageModalVisible:false,
                searchFormOptions: [
                    {
                        defineId: "approveOcrParams",
                        fields: [
                            "applyNo",
                            "customerName",
                            "ocrResult",
                            "disposeResult"
                        ]
                    }
                ],
                uniqueCodes:"",
                isView:false,
                busiNo:"",
                belongNo:"",
                access:"code",
                path:"case",
                columns: [
                    "applyNo",
                    "customerName",
                    "ocrDesc",
                    "createTime",
                    "ocrResult",
                    "disposeResult",
                    "firstDate",
                    "remark"
                ],
                approveOcrRemarkForm: {
                    remark: ''
                }

            }
        },
        methods: {
            init() {
                this.$refs.approveOcrTable.dispatcherQuery();
            },
            clearSelectedAll() {
                this.$refs.approveOcrTable.getTable().selectAll(false);
            },
            viewImg() {
                this.initImage();
            },
            initImage(){
                console.info("111"+this.selectedList);
                if(this.selectedList.length>1){
                    this.$Message.fail("请选择一个案件展示");
                }else {
                    this.isView=true
                    this.imageModalVisible=true
                    this.busiNo=this.selectedList[0].applyNo
                    this.belongNo=this.selectedList[0].applyNo
                    this.uniqueCodes="loanApplyFile"
                }
            },
            imageConfirm(){
                this.selectedList=[]
                this.isView=false
            },
            imageCancel(){
                this.selectedList=[]
                this.isView=false
            },
            goBack() {
                if (this.selectedCount == 0) {
                    this.$Message.warning("未选择数据行");
                } else {
                    if (this.selectedCount == 1) {
                        if (this.notExistsDisposed()) {
                            this.reject = true;
                            this.remarkModalVisible = true;
                            this.modalTitle = "识别正确，退回合作商";
                            this.operationType = "no";
                            this.approveOcrRemarkForm.remark = "签名或日期有误，请重新上传正确资料";
                            //this.approveOcrRemarkForm.remark = this.selectedList[0].ocrDesc;
                            this.remarkInputLabel = "提示合作商信息";
                        }
                    } else {
                        this.$Message.warning("不允许进行批量退回操作！");
                    }
                }
            },
            goOn() {
                if (this.selectedCount > 0) {
                    if (this.notExistsDisposed()) {
                        this.reject = false;
                        this.remarkModalVisible = true;
                        this.modalTitle = "识别错误，继续发起流程";
                        this.operationType = "yes";
                        this.remarkInputLabel = "修复原因说明";
                    }
                } else {
                    this.$Message.warning("未选择数据行");
                }
            },
            batchExport() {
                // TODO 批量导出
            },
            queryData(queryData) {
                this.$refs.approveOcrTable.loading = true;
                listApproveOcr(queryData).then(res => {
                    if (res.code == "0000") {
                        let {records, total} = res.data;
                        this.$refs.approveOcrTable.updateTableData(records, total);
                        this.clearSelectedAll();
                    }
                }).catch(err => {
                    this.$refs.approveOcrTable.loading = false;
                })

            },
            cancelApprove() {
                this.remarkModalVisible = false;
                this.approveOcrRemarkForm.remark = "";
            },
            submitApprove() {
                if (this.reject && this.approveOcrRemarkForm.remark.trim() == "") {
                    this.$Message.warning("提示合作商信息不可为空.");
                    return;
                }
                this.operationLoading = true;
                updateApproveOcr({
                    dataList: this.selectedList,
                    operationType: this.operationType,
                    remark: this.approveOcrRemarkForm.remark
                }).then(res => {
                    if (res.code == "0000") {
                        this.$Message.info("操作成功!");
                        this.reloadData();
                    }
                }).finally(()=>{
                    this.operationLoading = false;
                });
            },
            changeSelect(dataList) {
                this.selectedList = dataList;
                this.selectedCount = dataList.length;
            },
            reloadData() {
                this.cancelApprove();
                this.$refs.approveOcrTable.reloadData();
                this.clearSelectedAll();
            },
            notExistsDisposed() {
                if (this.selectedCount > 0) {
                    for (let i = 0; i < this.selectedCount; i++) {
                        if (this.selectedList[i].disposeResult == "yes") {
                            this.$Message.warning("存在已处理影像件，请取消对应数据项后再操作");
                            return false;
                        }
                    }
                }
                return true;
            }
        },
        computed: {
            defines() {
                return [
                    {
                        id: "approveOcrParams",
                        fields: approveOcrParams
                    },
                    {
                        id: "approveOcrData",
                        fields: approveOcrData
                    }
                ]
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style lang="less" scoped>
.imageModalVisible {
    /deep/ .magnify-content {
        height: 60vh;
    }
}

</style>
